<template>
  <div class="test-container">
    <span class="group" v-for="item in list" :key="item.value" @click="selectedGoup(item)" :class="item.isActive?'is-selected': ''">{{item.value}}</span>
  </div>
</template>
<script>
  import ImgFormat from '_c/imgFormat/ImgFormat.vue'
  export default {
    data() {
      return {
        list: [{
          value: 'A',
          isActive: false
        },
        {
          value: 'B',
          isActive: false
        },
        {
          value: 'C',
          isActive: false
        },
        {
          value: 'D',
          isActive: false
        },
        {
          value: 'E',
          isActive: false
        },
        {
          value: 'F',
          isActive: false
        },
        {
          value: 'G',
          isActive: false
        }
        ],
        selectedList: []
      }
    },
    methods: {
      selectedGoup(item) {
        if(item.isActive) {
          return item.isActive =false
        }
        let i =0
        this.list.forEach(item => {
          for(let key in item) {
            key === 'isActive' && item[key] && i++
          }
        })
        i<2&&(item.isActive = true)
      }
    }
  }
</script>

<style scoped>
  .test-container {
    padding: 100px;
  }
  .group {
    padding: 10px;
    margin: 0 10px;
    border: 1px solid #555;
  }
  .is-selected {
    background-color: rgb(52, 85, 166);
    color: #fff;
  }
</style>
